<template>
	<div class="register main">
		<h1 class="title">欢迎加入<span style="color: #42bd56;">笔记之家</span></h1>

		<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<el-form-item label="用户名" prop="name" class="form_username">
				<el-input type="text" v-model.number="ruleForm.name" placeholder="用户名由数字、字母、下划线组成，长度6~12位，不能以数字开头"></el-input>
			</el-form-item>
			<el-form-item label="手机号码" prop="tel" class="form_tel">
				<el-input type="text" v-model="ruleForm.tel" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="pass" class="form_pwd">
				<el-input :type="passType" v-model="ruleForm.pass" autocomplete="off" placeholder="密码由数字字母组成，长度6位"></el-input>
				<span class="show_pwd" :class="{show: passType == 'text'}" @click="showPwd()"></span>
			</el-form-item>
			<el-form-item label="确认密码" prop="checkPass" class="form_pwdAgain">
				<el-input :type="passType2" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
				<span class="show_pwd" :class="{show: passType2 == 'text'}" @click="showPwdAgain()"></span>
			</el-form-item>
			
			<p>
				<router-link :to="{name:'login',query:{query:$route.query.query || ''}}" style="color:#42bd56;font-weight:700">去登陆</router-link>
			</p>
			
			<el-form-item class="form_submit">
				<el-button class="submit_btn" type="primary" @click="submitForm('ruleForm')" :disabled="isDisabled" :class="{disabled: isDisabled}">{{registerState}}</el-button>
				<el-button class="reset_btn" @click="resetForm('ruleForm')">重置</el-button>
			</el-form-item>
		</el-form>

	</div>

</template>
<script>
	export default {
		name: "register",
		data() {
			var checkName = (rule, value, callback) => {
				var regName = /^[a-z_]{1}[a-zA-Z0-9_]{5,11}$/i;
				if (value === "") {
					callback(new Error('请输入用户名'));
				} else {
					if (!regName.test(value)) {
						callback(new Error('用户名格式错误'));
					} else {
						callback();
					}
				}
			};
			var validateTel = (rule, value, callback) => {
				let regTel = /^[1]{1}[34578]{1}[0-9]{9}$/;
				if (value === '') {
					callback(new Error('请输入手机号码'));
				} else {
					if (!regTel.test(value)) {
						callback(new Error('手机号码格式错误'));
					} else {
						callback();
					}
				}
			};
			var validatePass = (rule, value, callback) => {
				let regPwd = /^[a-z0-9]{6}$/i;
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					// if (this.ruleForm.checkPass !== '') {
					// 	this.$refs.ruleForm.validateField('checkPass');
					// }
					// callback();
					if (!regPwd.test(value)) {
						callback(new Error('密码格式错误'));
					} else {
						callback();
					}
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.ruleForm.pass) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};

			return {
				isDisabled: false,
				registerState: "立即注册",
				passType: 'password',
				passType2: "password",
				msg: "",
				ruleForm: {
					pass: '',
					checkPass: '',
					tel: '',
					name: ''
				},
				rules: {
					pass: [{
						validator: validatePass,
						trigger: 'blur'
					}],
					checkPass: [{
						validator: validatePass2,
						trigger: 'blur'
					}],
					name: [{
						validator: checkName,
						trigger: 'blur'
					}],
					tel: [{
						validator: validateTel,
						trigger: 'blur'
					}],
				}
			};
		},
		methods: {
			showPwd: function() {
				this.passType = this.passType == 'text' ? 'password' : "text";
			},
			showPwdAgain: function() {
				this.passType2 = this.passType2 == 'text' ? 'password' : "text";
			},
			beforeSubmit: function () {
			    this.isDisabled = true;
			    this.registerState = '正在提交...'
			},
			onSuccess: function (res) {
			    this.$router.push({name:'login',query:{query:this.$route.query.query || ''}});
			},
			onError: function (err) {
			    this.registerState = '立即注册'
			    this.isDisabled = false
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.beforeSubmit() // Disabled submit button
						this.$api.register({
						    tel: this.ruleForm.tel,
						    password: this.ruleForm.pass,
						    name: this.ruleForm.name
						}).then(res => {
						    console.log(res);
						    // Success handle
						    this.onSuccess(res)
						}, err => {
						    // Error handle
						    this.onError(err)
						})
					} 
					// else {
					// 	return false;
					// }
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
		},
	}
</script>
<style lang="scss">
	p {
		text-indent: 20px;
		margin-bottom: 20px;
	}

	.el-form-item {
		margin-bottom: 37px !important;

		.el-form-item__label {
			line-height: 60px;
			font-size: 1.5rem;
		}

		.el-form-item__content {
			line-height: 60px;

			.el-input {
				margin-bottom: 0;

				input {
					height: 60px;
					border-radius: 10px;
				}
			}

			.show_pwd {
				top: 0 !important;
				right: 20px !important;
			}

			.el-form-item__error {
				height: 20px;
				font-size: 14px;
				color: #aaa;
				margin-bottom: 5px;
			}
		}

		.submit_btn {
			cursor: pointer;
			width: 180px;
			height: 60px;
			border: 0.1rem solid #17AA52;
			border-radius: 0.3rem;
			font-size: 1.7rem;
			text-align: center;
			color: #fff;
			background: #42bd56;
		}
		.reset_btn{
			cursor: pointer;
			width: 180px;
			height: 60px;
			border-radius: 0.3rem;
			font-size: 1.7rem;
			text-align: center;
			
		}
	}
	.form_submit{
		.el-form-item__content{
			margin-left: 130px !important;
		}
	}
</style>
<style lang="scss" scoped>
	.require {
		color: red;
	}

	.main {
		width: 600px;
		margin: 0 auto;

		.title {
			width: 100%;
			height: 80px;
			line-height: 80px;
			text-align: center;
		}

		form {
			padding: 15px;

			div {
				margin-bottom: 15px;

				.text {
					height: 20px;
					font-size: 14px;
					color: #aaa;
					margin-bottom: 5px;

					.tip {
						color: red;
					}

				}

				label {
					display: block;
					width: 100%;
					height: 60px;

					input::placeholder {
						color: #ccc;
					}

					input {
						width: 100%;
						height: 100%;
						padding: 0 10px;
						box-sizing: border-box;
						font-size: 1.5rem;
						background: #fff;
						border: 1px solid #ccc;
						border-radius: 10px;
						outline: 0;
					}
				}
			}

			.form_pwd,
			.form_pwdAgain {
				position: relative;

				input {
					padding-right: 80px;
				}

				.show_pwd {
					position: absolute;
					right: 0;
					top: 25px;
					width: 80px;
					height: 60px;
					background: url("../assets/pwd_hide.png") center center no-repeat;
					background-size: 36px;
				}

				.show_pwd.show {
					background: url("../assets/pwd_show.png") center center no-repeat;
					background-size: 36px;
				}
			}

			.form_submit {
				.submit {
					cursor: pointer;
					width: 100%;
					height: 4.4rem;
					margin-top: 1rem;
					border: 0.1rem solid #17AA52;
					border-radius: 0.3rem;
					width: 100%;
					height: 100%;
					font-size: 1.7rem;
					line-height: 4.4rem;
					text-align: center;
					color: #fff;
					background: #42bd56;
				}

				.disabled {
					cursor: not-allowed;
					background: #eee;
					border: none;
				}
			}
		}
	}
</style>
